<template>
    <div class="marker" v-if="isContacUser"></div>
    <div class="yzm">
        <div class="close" @click="isContacUser_close"></div>
        <p>请按照 “{{ textRank }}” 的顺序点击</p>
        <div id='perustarkistus' class='perustarkistus'>
            <img :src="imageSrc" :style="{ width: parentWidth + 'px', height: parentHeight + 'px' }" alt="">
            <div v-for="(item, indexS) in getTextPositionData" :key="indexS" :style="{
                left: item.x + 'px',
                top: item.y + 'px',
                width: textWidth + 'px',
                height: textWidth + 'px',
                transform: `rotate(${item.transform}deg)`,
                fontSize: '20px',
                lineHeight: textWidth + 'px'
            }" class="positionDiv" @click="textClickFun(item.text)">
                <span>{{ item.text }}</span>
                <span v-if="item.rank !== null">{{ item.rank + 1 }}</span>
            </div>
        </div>
        <div class="footer">
            <span @click="changeSelectImage">刷新验证</span>
            <svg @click="changeSelectImage" t="1719212149682" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4068" width="25" height="25"><path d="M218.39878 92.602343c-47.599734 33.299814-88.899503 74.299585-122.799314 121.799319C27.499846 309.70113-6.099966 426.300479 0.999994 542.599829c1.499992 25.09986 23.099871 44.199753 48.199731 42.699762s44.199753-23.099871 42.699762-48.199731C79.799554 338.000972 211.098821 156.401986 404.197742 105.202272c147.999173-39.199781 303.698304 4.899973 408.897716 112.699371l-70.999603 38.199786 220.698767 136.399239 7.899956-259.298552-74.699583 40.199775C837.595321 107.202261 763.195737 57.30254 679.196206 28.102703 582.896744-5.197111 479.79732-8.99709 380.897872 17.202764c-58.599673 15.499913-113.299367 40.899772-162.499092 75.399579zM53.299702 890.797884l74.699583-40.099776c58.399674 66.19963 132.799258 116.099351 216.798789 145.199189 96.299462 33.299814 199.398886 37.099793 298.298334 10.899939 38.499785-10.199943 75.299579-24.599863 109.999385-43.099759 18.099899-9.599946 35.599801-20.399886 52.499707-32.19982 47.599734-33.299814 88.799504-74.199586 122.699315-121.599321 68.09962-95.199468 101.799431-211.698817 94.79947-327.898168-1.499992-25.09986-23.099871-44.199753-48.199731-42.699762s-44.199753 23.099871-42.699761 48.199731C943.994727 686.199027 812.595461 867.598014 619.796538 918.797728c-147.999173 39.199781-303.698304-4.899973-408.897716-112.699371l70.999603-38.199786L61.199658 631.499332l-7.899956 259.298552z" p-id="4069" fill="#515151"></path></svg>
        </div>
    </div>
</template>

<script setup>
import { computed, defineComponent, onBeforeMount, reactive, ref, watch } from 'vue'
import { getRandomUniqueIndexes } from "@/hooks/getRandomUniqueIndexes"; //验证文字定位函数
import { toRefs } from 'vue';

const props = defineProps(['isContacUser_close','isContacUser','login'])
let {isContacUser_close,isContacUser,login} = toRefs(props)

// 用来随机选择文字
const textString = '凭趟押王玉抹凶超护报抢趁凳抬出击披越趋跳叉又边友及反双达悟辽发辣悄叔取受变辪辫叙磁槽蛛蛙蛇韵音蛋槐蛾磨蛮砌砍码霸露研砖婶云御泰京亭亮泉亩泊享交泄亦产得徐亡菠徒亿穗武委姐姑箱钓姓钞姜薯钟薪管箭箩钉始针薄沉莫忙仪们代沃令以志沙任忍份忌沟仿莲仰心刑灰灯灭刊火分切慕刃刀蹲炒躁炕勺勾勿勤炉炊炎勒龙炸点身躬炼龟躲勇龄勉躺炮炭励劲劳商眠易眯星眨啊昆昂昌眼昏明啦省显昼看眉春'
const bgPictures = [
    'https://img2.baidu.com/it/u=1381481047,1529970259&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500',
    'https://img2.baidu.com/it/u=4286724097,1475456570&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
    'https://img1.baidu.com/it/u=2310170655,486191485&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
    'https://img2.baidu.com/it/u=2526401426,2132302010&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
    'https://img2.baidu.com/it/u=2279721922,3725358742&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
    'https://img1.baidu.com/it/u=2605372625,2257936617&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313',
    'https://img2.baidu.com/it/u=188805366,3528195373&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675',
    'https://img0.baidu.com/it/u=381886100,3541087750&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
    'https://img2.baidu.com/it/u=769068768,1914010451&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
]   // 背景图片列表

const allTextNum = 4 // 生成文字的个数/需要点击的个数
const textWidth = 30 // 文字的宽度
const parentWidth = 300  // 宽度
const parentHeight = 180  // 高度
const angleRange = 90  // 旋转角度范围 例如值为90 就是-90~90
const textRank = ref('')  // 文本顺序
const clickTextRank = ref('')// 点击文本的顺序
const isVerification = ref(false) //是否验证成功
const textPosition = reactive({
    textPositionData: []
}) // 文本生成的位置
const imageSrc = ref('') // 随机选择的图片src

// 文字点击事件
const textClickFun = (text) => {
    if (clickTextRank.value.includes(text)) {
        clickTextRank.value = clickTextRank.value.replace(text, '')
    } else {
        clickTextRank.value += text
    }
    // console.log('clickTextRank', clickTextRank.value)
}

// 检测两个矩形是否重叠的函数
const isOverlapping = (rect1, rect2) => {
    return !(
        rect1.x + rect1.width <= rect2.x ||
        rect2.x + rect2.width <= rect1.x ||
        rect1.y + rect1.height <= rect2.y ||
        rect2.y + rect2.height <= rect1.y
    );
}

// 生成随机位置的函数
const generateRandomPosition = (existingPositions, parentWidth, parentHeight, elementWidth, elementHeight) => {
    let position;
    let overlap;

    do {
        overlap = false;
        position = {
            x: Math.floor(Math.random() * (parentWidth - elementWidth)),
            y: Math.floor(Math.random() * (parentHeight - elementHeight)),
            width: elementWidth,
            height: elementHeight,
            transform: Math.floor(Math.random() * (angleRange + angleRange + 1)) - angleRange,
            text: ''
        };

        // 检查新位置是否与现有位置重叠
        for (const existing of existingPositions) {
            if (isOverlapping(position, existing)) {
                overlap = true;
                break;
            }
        }
    } while (overlap);

    return position;
}

const changeSelectImage = () => { //创建文字函数
    const newPositions = [];  // 用来生成文字定位信息
    clickTextRank.value = ''
    let textOptionArr = getRandomUniqueIndexes(textString.length, allTextNum)
    let textSelectString = ''  // 文本顺序
    for (let i = 0; i < allTextNum; i++) {
        const newPosition = generateRandomPosition(newPositions, parentWidth, parentHeight, textWidth, textWidth);
        newPositions.push({ ...newPosition, text: textString[textOptionArr[i]] });
        textSelectString += textString[textOptionArr[i]]
    }
    textRank.value = textSelectString
    // console.log('newPositions', newPositions)
    textPosition.textPositionData = newPositions
}

const getTextPositionData = computed(() => {
    const data = []
    textPosition.textPositionData.forEach(item => {
        const rankIndex = clickTextRank.value.indexOf(item.text);
        data.push({
            ...item,
            rank: rankIndex !== -1 ? rankIndex : null
        });
    });

    // console.log('data', data)
    return data
})

onBeforeMount(() => {
    imageSrc.value = bgPictures[Math.floor(Math.random() * 9)]
    changeSelectImage()
})

watch(clickTextRank, (newValue, oldValue) => {
    if (clickTextRank.value.length === allTextNum) {
        if (clickTextRank.value === textRank.value) {
            // ElMessage.success('驗證成功')
            setTimeout(() => {
                login.value()
                setTimeout(() => {
                    isContacUser_close.value()
                    isVerification.value = true
                }, 500);
            }, 500);
        } else {
            ElMessage.error('驗證失敗')
            clickTextRank.value = ''
            changeSelectImage()
        }
    }
})


</script>

<style lang="less" scoped>
.yzm {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    z-index: 9999;
    filter: drop-shadow(2px 4px 6px black);
    .close{
        margin-top: -6px;
        transform: scale(0.9);
    }
    p {
        padding: 10px;
    }
    .footer{
        float: right;
        margin-right: 20px;
        margin-bottom: 10px;
        span{
            position: relative;
            top: -7px;
            right: 6px;
            cursor:default;
            user-select: none;
            cursor: pointer;
        }
        svg{
            cursor: pointer;
        }
    }
}

.marker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 9999;
}

#perustarkistus.perustarkistus {
    position: relative;
    padding: 10px;

    div.positionDiv {
        position: absolute;
        cursor: pointer;
        text-align: center;
        font-weight: bold;
        z-index: 1;

        span {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 1;
            background-color: rgba(255, 255, 255, .7);
        }
    }
}
</style>